<template>
  <div>
    <header-top :title=title >
      <div @click="back()" class="back" slot="back"></div>
    </header-top>
    <div v-if="task" class="content clearfix">
      <div  class="task-content">
        <h3>{{task.subjectName}}作业</h3>
        <p>{{task.taskContent}}</p>
        <div class="task-img">
          <ul v-for="img of task.pictureList" id="viewer" class="clearfix">
            <li class="center">
              <img src="images/banner.jpg" alt="">
            </li>
          </ul>
        </div>
      </div>
      <div class="task-time">
        <p style="border-bottom: 1px solid #e3e3e3">发布时间：{{task.createTime}}</p>
        <p>接收对象：{{task.className}}</p>
      </div>
    </div>
  </div>

</template>

<script>
  import headerTop from "@/components/headerTop/headerTop";
  import teacherClass from "@/components/teacherClass/teacherClass";
  import { Toast } from 'vant';   //使用消息提示
  import {reqTask} from "@/api";


  export default {
    name: "taskDetail",
    components:{
      headerTop:headerTop,
      teacherClass:teacherClass,
    },
    data(){
        return{
          title:'作业详情',
          task:null,
          params:{},
        }
    },
    async mounted() {
      this.params =  this.$route.query
      let task = await reqTask(this.params.className,this.params.taskId)
      this.task = task.data[0]
    },
    methods:{
      back(){
        this.$router.replace({path:'/class/task'})
      },
    }
  }
</script>

<style scoped>
  .task-content{width: 100%; margin: 0.5rem 0 0.5rem 0; background: #fff; overflow: hidden;}
  .task-content h3{font-size: 1.2rem; height: 1.2rem; line-height: 1.2rem; text-align: center; margin-top: 1.75rem;}
  .task-content p{line-height: 2rem; font-size: 1.05rem; margin-top: 1.65rem; padding: 0 1rem;	}
  .task-img{width: 25rem; margin: 1.45rem auto 1.7rem;}
  .task-img ul{width: 26rem;}
  .task-img li{width: 5.5rem; height: 5.5rem; margin:0 1rem 1rem 0; background: #000; float: left; overflow: hidden;}
  .task-img li img{height: 6rem;}
  .task-time{ width: 100%; box-sizing: border-box; background: #fff;}
  .task-time p{height:3rem; line-height: 3rem; font-size: 1rem; color: #666; padding-left: 1rem;}

</style>
